<template>
  <el-container>

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm"  label-width="120px" label-position="left" class="demo-ruleForm" size="small">
      <el-form-item label="等级名称" prop="name">
        <el-input v-model="ruleForm.name" placeholder="请输入等级名称"></el-input>
      </el-form-item>

      <el-form-item label="等级" prop="level">
        <el-input v-model="ruleForm.level" placeholder="请输入等级"></el-input>
      </el-form-item>

      <el-form-item label="所需成长值" prop="grow">
        <el-input v-model="ruleForm.grow" placeholder="请输入所需积分"></el-input>
      </el-form-item>

      <el-form-item label="折扣" prop="discount">
        <el-input v-model="ruleForm.discount" placeholder="请输入折扣"></el-input>
      </el-form-item>

      <el-form-item label="图标" prop="icon">
        <el-upload
          name="icon"
          class="avatar-uploader"
          :show-file-list="false"
          :http-request="fileUpload"
          :on-success="handleAvatarSuccess">
          <img v-if="ruleForm.icon" :src="ruleForm.icon" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即保存</el-button>
        <!--<el-button @click="resetForm('ruleForm')">重置</el-button>-->
        <el-button @click="goBack()">返回</el-button>
      </el-form-item>
    </el-form>
  </el-container>
</template>

<script>
  export default {
    mounted: function () {
      let _this = this;
      var attrs = this.$attrs;
      if (attrs.methodType == this.constant.EDITORMETHOD) {
        this.api.getUserLevel({
          id: attrs.id
        }).then(function (res) {
          if (res.code == 1) {
            _this.ruleForm = res.data;
          }
        }).catch(function (error) {
          throw new Error(error);
        });
      }
    },
    methods: {
      goBack: function () {
        this.$router.go(-1)
      },
      fileUpload: function (fileInfo) {
        let file = fileInfo.file;
        let _this = this;
        this.BaseUtils.fileToBase64(file).then(function (value) {
          _this.api.uploadFileToBase64({
            file: value
          },'bank_card').then(function (res) {
            if(res.code == 1){
              eval('_this.ruleForm.' + fileInfo.filename + '="' + res.data + '"');
              _this.$message({
                showClose: true,
                message: res.msg,
                type: 'success'
              });
            }else{
              _this.$message({
                showClose: true,
                message:res.msg,
                type: 'warning'
              });
            }
          }).catch(function (error) {
            throw new Error(error);
          })
        }).catch(function (error) {
          throw new Error(error);
        })
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      submitForm(formName) {
        let _this = this;
        var attrs = this.$attrs;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (attrs.methodType == this.constant.EDITORMETHOD) {
              _this.api.updateUserLevel(_this.ruleForm).then(function (res) {
                if (res.code == 1) {
                  _this.goBack();
                  _this.$message({
                    showClose: true,
                    message: res.msg,
                    type: 'success',
                  });
                } else {
                  _this.$message({
                    showClose: true,
                    message: res.msg,
                    type: 'warning'
                  });
                }
              }).catch(function (error) {
                throw new Error(error);
              });
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
    data() {
      return {
        ruleForm: {
          id:null,                //类型：Number  必有字段  备注：无
          level:'',                //类型：Number  必有字段  备注：等级
          grow:'',                //类型：Number  必有字段  备注：所需积分
          name:'',                //类型：String  必有字段  备注：等级名称
          discount:'',                //类型：String  必有字段  备注：折扣
          icon:''                //类型：String  必有字段  备注：图标
        },
        rules: {
          name: [
            {required: true, message: '请输入等级名称', trigger: 'blur'},
          ],
          level: [
            {required: true, message: '请输入等级', trigger: 'blur'},
          ],
          grow: [
            {required: true, message: '请输入所需积分', trigger: 'blur'},
          ],
          discount: [
            {required: true, message: '请输入折扣', trigger: 'blur'},
          ],
          icon: [
            {required: true, message: '请上传图标', trigger: 'blur'},
          ],
        }
      }
    },
  }
</script>

<style scoped>
  .el-container {
    display: block;
  }

  .el-form {
    width: 1000px;
    margin: 15px 0 15px 30px;
  }

  /* 图片上传 */
  .avatar-uploader{
    border: 1px dashed #d9d9d9;
    width: 178px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
